<template>
  <div class="mine">
    <!-- 导航 -->
     <van-nav-bar
      title="我的收藏"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
     <!-- 收藏列表 -->
      <div class="cai">
       <div class="caidan" @click="todate(item)"  v-for="(item,index) in $store.state.collectlist" :key="index">
        <div class="imgbox">
            <img :src="item.picUrl" alt="" class="tu">
        </div>
        <div class="jieshao">
            <h3 class="hh"> {{item.name}} </h3>
            <span class="bin"> ★ {{item.wmPoiScore}} </span><span class="fenzhong">{{item.monthSalesTip}}</span>
            <div class="ss">
                <span class="chao">{{item.minPriceTip}} {{item.shippingFeeTip}}</span><span> {{item.deliveryTimeTip
                  }} {{item.distance}}</span>
            </div>
            <div class="manjian">
                <span class="jian"> {{item.discounts2[0].info}}</span>
            </div>

        </div>
       </div>
       <!-- 收藏提示 -->
       <div v-if="$store.state.collectlist.length == 0" class="empty">
         未收藏任何店铺，<span @click="$router.push('/index/home')">去逛逛</span>
       </div>
    </div>
    


  </div>
</template>

<script>
export default {
    methods:{
      todate(item){//跳到详情页
      this.$router.push('/date/'+item.mtWmPoiId);
      }
    }
}
</script>

<style lang="scss" scoped>
.caidan{
    display: flex;
    justify-content: space-between;
}
.caidan .imgbox{
    width: 120px;
    height: 150px;
}
.caidan .imgbox .tu{
    width: 120px;
    height: 120px;
}
.caidan .jieshao{
    width: 300px;
    height: 130px;
}
.caidan .jieshao .ss .chao{
    width: 40px;
    height: 10px;
    // background-color: rgba($color: #f0601d, $alpha: 0.5);
    margin: 5px 5px;
}
.caidan .jieshao .manjian span{
    border: solid 1px red;
    color: red;
    font-size: 12px;
    margin:5px 5px;
}
.cai{
  margin-bottom: 40px;
  .empty{
    text-align: center;
    padding: 50px 0;
    span{
      color: rgb(71, 137, 236);
    }
  }
}

</style>